<template>
  <div class="app-container">
    <!-- 筛选区域 -->
    <div class="filter-container">
      <el-radio-group v-model="segmentType" style="margin-right: 10px">
        <el-radio-button label="IsAuto">自动站</el-radio-button>
        <el-radio-button label="IsManual">实验室数据</el-radio-button>
      </el-radio-group>

      <el-select
        v-model="segmentId"
        placeholder="监测点位"
        clearable
        multiple
        style="width: 200px; margin-right: 10px"
      >
        <el-option
          v-for="item in dmList"
          :key="item.id"
          :label="item.segmentname"
          :value="item.id"
        ></el-option>
      </el-select>

      <!-- 时间周期选择 -->

      <tabDate :tabs="dateTypeTabs" ref="tabDateRef"></tabDate>
      <!-- <el-button-group>
        <el-button :type="dateType === 'day' ? 'primary' : ''" @click="dateType = 'day'">按天</el-button>
        <el-button :type="dateType === 'week' ? 'primary' : ''" @click="dateTypeChange('week')">按天</el-button>
        <el-button :type="dateType === 'month' ? 'primary' : ''" @click="dateTypeChange('month')">按月</el-button>
        <el-button :type="dateType === 'year' ? 'primary' : ''" @click="dateTypeChange('year')">按年</el-button>
      </el-button-group> -->

      <!-- 日期范围 -->
      <!-- <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        style="margin: 0 10px;"
      ></el-date-picker> -->
      <!-- 预警级别 -->
      <span style="margin-right: 10px">预警级别：</span>
      <el-select
        v-model="warnLevel"
        placeholder="全部"
        clearable
        style="width: 150px"
      >
        <el-option label="红色" value="1"></el-option>
        <el-option label="橙色" value="2"></el-option>
        <el-option label="黄色" value="3"></el-option>
        <!-- <el-option label="蓝色" value="blue"></el-option> -->
      </el-select>

      <!-- 操作按钮 -->
      <el-button type="primary" icon="el-icon-search" @click="handleSearch"
        >查询</el-button
      >
      <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
      <!-- <el-button icon="el-icon-download">导出</el-button> -->

      <!-- 列表/图表切换 -->
      <!-- <el-button-group style="float: right;">
        <el-button type="primary" @click="viewMode = 'list'">列表</el-button>
        <el-button @click="viewMode = 'chart'">图表</el-button>
      </el-button-group> -->
    </div>
    <!-- 顶部标签页 -->
    <el-tabs v-model="warnType" type="card" @tab-click="handleTabClick">
      <el-tab-pane
        v-for="item in warningListByIsAuto"
        :label="item.label"
        :name="item.name"
      ></el-tab-pane>
    </el-tabs>

    <!-- 数据表格 -->
    <div class="table-container">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        v-loading="loading"
      >
        <el-table-column prop="segmentname" label="点位名称" width="200">
          <template #default="{ row }">
            <span
              style="color: #409eff; cursor: pointer"
              @click="viewProcess(row)"
              >{{ row.segmentname }}</span
            >
          </template>
        </el-table-column>

        <el-table-column prop="warnlevel" label="预警级别" width="100">
          <template #default="{ row }">
            <el-tag :type="getTagType(row.warnlevel)" size="small">{{
              colorMap[row.warnlevel]
            }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="warnTypeName"
          label="预警类型"
          width="120"
        ></el-table-column>

        <el-table-column
          prop="warntime"
          label="报警时间"
          width="160"
        ></el-table-column>

        <el-table-column
          prop="itemname"
          label="监测因子"
          width="150"
        ></el-table-column>

        <el-table-column
          prop="warnmessage"
          label="预警信息"
          min-width="200"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="controlSuggestions"
          label="管控建议"
          min-width="150"
          show-overflow-tooltip
        >
          <template #default="{ row }">
            <div>{{ row.controlSuggestions }}</div>
          </template>
        </el-table-column>

        <el-table-column prop="processingstate" label="预警状态" width="100">
          <template #default="{ row }">
            <span>{{ processingstateMap[row.processingstate] }}</span>
          </template>
        </el-table-column>

        <!-- <el-table-column prop="point" label="处置节点" width="100"></el-table-column> -->

        <!-- <el-table-column prop="situation" label="处置情况" width="120"></el-table-column> -->

        <el-table-column label="操作" width="120">
          <template #default="{ row }">
            <el-link type="primary" @click="viewProcess(row)">查看详情</el-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-show="total > 0"
        :current-page="pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        :pager-count="5"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
      <!-- <el-dialog title="" :visible.sync="dialogVisible" width="80%" center append-to-body>
            <el-table :data="detailData" border style="width: 100%">
              <el-table-column  prop="id" label="id"></el-table-column>
              <el-table-column  prop="segmentid" label="点位id"></el-table-column>
              <el-table-column  prop="warntime" label="预警时间"></el-table-column>
              <el-table-column  prop="warntype" label="预警类型"></el-table-column>
              <el-table-column  prop="warnTypeName" label="预警类型名称"></el-table-column>
              <el-table-column  prop="warnlevel" label="预警级别"></el-table-column>
              <el-table-column  prop="warnLevelName" label="预警级别名称"></el-table-column>
              <el-table-column  prop="itemid" label="报警因子id"></el-table-column>
              <el-table-column  prop="itemname" label="报警因子名称"></el-table-column>
              <el-table-column  prop="sampletime" label="监测时间"></el-table-column>
              <el-table-column  prop="warnmessage" label="监测内容"></el-table-column>
              <el-table-column prop="processingstate" label="预警状态" width="100">
                <template #default="{ row }">
                  <span>{{processingstateMap[row.processingstate]}}</span>
                </template>
              </el-table-column>
            </el-table>
          <div slot="footer">
              <el-button @click="dialogVisible = false">关闭</el-button>
          </div>
      </el-dialog> -->
      <el-dialog
        title="预警详情"
        :visible.sync="dialogVisible"
        width="70%"
        center
        append-to-body
      >
        <div v-if="detailData && detailData.length > 0">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form :label-width="'120px'">
                <!-- <el-form-item label="预警ID">
                  <span style="margin-left: 10px;">{{ detailData[0].id }}</span>
                </el-form-item> -->
                <el-form-item label="点位名称">
                  <span style="margin-left: 10px">{{
                    detailData[0].segmentname
                  }}</span>
                </el-form-item>
                <el-form-item label="预警类型">
                  <span style="margin-left: 10px">{{
                    detailData[0].warnTypeName
                  }}</span>
                </el-form-item>
                <el-form-item label="预警级别">
                  <el-tag
                    :type="getTagType(detailData[0].warnlevel)"
                    size="small"
                    >{{ colorMap[detailData[0].warnlevel] }}</el-tag
                  >
                </el-form-item>
                <el-form-item label="监测因子">
                  <span style="margin-left: 10px">{{
                    detailData[0].itemname
                  }}</span>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="12">
              <el-form :label-width="'120px'">
                <el-form-item label="预警时间">
                  <span style="margin-left: 10px">{{
                    detailData[0].warntime
                  }}</span>
                </el-form-item>
                <el-form-item label="监测时间">
                  <span style="margin-left: 10px">{{
                    detailData[0].sampletime
                  }}</span>
                </el-form-item>
                <el-form-item label="预警状态">
                  <span style="margin-left: 10px">{{
                    processingstateMap[detailData[0].processingstate]
                  }}</span>
                </el-form-item>
                <!-- <el-form-item label="点位ID">
                  <span style="margin-left: 10px;">{{ detailData[0].segmentid }}</span>
                </el-form-item>
                <el-form-item label="报警因子ID">
                  <span style="margin-left: 10px;">{{ detailData[0].itemid }}</span>
                </el-form-item> -->
              </el-form>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form :label-width="'120px'">
                <el-form-item label="预警信息">
                  <div
                    style="
                      margin-left: 10px;
                      padding: 8px;
                      border: 1px solid #e4e7ed;
                      border-radius: 4px;
                      background-color: #f5f7fa;
                      min-height: 100px;
                    "
                  >
                    {{ detailData[0].warnmessage }}
                  </div>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form :label-width="'120px'">
                <el-form-item label="管控建议">
                  <div
                    style="
                      margin-left: 10px;
                      padding: 8px;
                      border: 1px solid #e4e7ed;
                      border-radius: 4px;
                      background-color: #f5f7fa;
                      min-height: 100px;
                    "
                  >
                    {{ detailData[0].controlSuggestions }}
                  </div>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
        <div slot="footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getSegmentWarnData, getDmList } from "./api";
import tabDate from "../../../components/viewComponents/tabDate/tabDate.vue";
export default {
  name: "AutoMonitorWarningAlert",
  components: {
    tabDate,
  },
  data() {
    return {
      warnType: "101",
      segmentType: "IsAuto",
      segmentId: "",
      dateType: "week",
      dateRange: ["2025-04-30", "2025-05-14"],
      warnLevel: "",
      viewMode: "list",
      pageNum: 1,
      pageSize: 10,
      dateTypeTabs: [
        { value: "date", name: "按天" },
        { value: "month", name: "按月" },
        { value: "year", name: "按年" },
      ],
      dateRangeMap: {
        week: "daterange",
        month: "monthrange",
        year: "years",
      },
      colorMap: {
        1: "红色",
        2: "橙色",
        3: "黄色",
      },
      //0-未处理 1-处理中 2-已处理 3-已关闭
      processingstateMap: {
        0: "未处理",
        1: "处理中",
        2: "已处理",
        3: "已关闭",
      },
      warningTypes: [
        { label: "限值预警", name: "101", type: "IsManual" },
        { label: "监测因子超标", name: "102", type: "IsManual" },
        { label: "点位超标", name: "103" },
        { label: "瞬时突变", name: "104" },
        { label: "离线预警", name: "105" },
      ],
      dMApiList: [],
      // 表格数据
      tableData: [],
      loading: 0,
      total: 0,
      dialogVisible: false,
      detailData: [],
    };
  },
  computed: {
    warningListByIsAuto() {
      if (this.segmentType == "IsManual") {
        return this.warningTypes.filter((item) => item.type == "IsManual");
      }
      this.warnType = "101";
      return this.warningTypes;
    },
    dmList() {
      let type = this.segmentType == "IsAuto" ? "1" : "0";
      let lsit = this.dMApiList.filter((item) => item.isauto == type);
      this.segmentId = "";
      return lsit;
    },
    queryParams() {
      let dateMap = {
        date: "3",
        month: "1",
        year: "2",
      };
      let dateRange = this.$refs.tabDateRef.getDateValue();
      let beginTime = dateRange[0],
        endTime = dateRange[1];
      let dateTab = this.$refs.tabDateRef.tabValue;
      let dateType = dateMap[dateTab];
      return {
        warnType: this.warnType,
        segmentType: this.segmentType,
        segmentId: this.segmentId,
        dateType: dateType,
        beginTime: beginTime,
        endTime: endTime,
        warnLevel: this.warnLevel,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
    },
  },
  created() {
    this.dateRange = [
      $moment().offset("week", -1).format("{yyyy}-{mm}-{dd}"),
      $moment().format("{yyyy}-{mm}-{dd}"),
    ];
    // this.getList();
    this.asyncCreate();
  },

  methods: {
    async asyncCreate() {
      await this.getDmlist();
      this.getList();
    },
    getDmlist() {
      return getDmList().then((res) => {
        this.dMApiList = res.rows;
        console.log("dMList: ", this.dMApiList);
      });
    },
    getList() {
      this.loading = true;
      // let res = this.$refs.tabDateRef.getDateValue();
      // console.log('getList',res);
      getSegmentWarnData(this.queryParams).then((res) => {
        this.tableData = res.rows;
        this.loading = false;
        this.total = res.total;
      });
    },
    dateTypeChange(val) {
      this.dateType = val;
      this.dateRange = [
        $moment().offset(val, -1).format("{yyyy}-{mm}-{dd}"),
        $moment().format("{yyyy}-{mm}-{dd}"),
      ];
    },
    handleTabClick(tab) {
      this.getList();
    },
    handleSearch() {
      this.getList();
    },
    handleReset() {
      this.warnType = "101";
      this.segmentType = "IsAuto";
      this.segmentId = "";
      this.dateType = "week";
      this.warnLevel = "";
      this.viewMode = "list";
    },
    viewProcess(row) {
      this.detailData = [row];
      this.dialogVisible = true;
      // 可跳转到流程详情页
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.pageNum = val;
    },
    getTagType(level) {
      switch (level) {
        case "2":
          return "danger";
        case "3":
          return "warning";
        case "2":
          return "info";
        default:
          return "warning";
      }
    },
  },
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.filter-container {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.table-container {
  margin-top: 20px;
}
</style>
